page {
  background-color: #f5f5f5;
}

.view-image {
  width: 100%;
  height: 584rpx;
  position: relative;
}

.view-box {
  position: absolute;
  top: 100rpx;
  left: 122rpx;
  width: 500rpx;
  height: 320rpx;
  color: #fff;
  text-align: center;
}

.view-box .view-img {
  width: 134.52rpx;
  height: 132.16rpx;
}

.view-one {
  margin-bottom: 15rpx;
  font-weight: 600;
  font-size: 36rpx;
  color: #FFFFFF;
}

.view-two {
  font-weight: 400;
  font-size: 28rpx;
  color: #FFFFFF;
  margin-bottom: 10rpx;
}

.view-three {
  font-weight: 400;
  font-size: 28rpx;
  color: #FFFFFF;
}

.view-box2 {
  position: absolute;
  top: 423rpx;
  left: 16px;
  width: 690rpx;
  height: 268rpx;
  background: #FFFFFF;
  border-radius: 16rpx;

  .view-text {
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #818181;
    margin-top: 27rpx;
  }
}

.main {
  margin-top: 27rpx;
  display: flex;
  justify-content: space-evenly;

  .task {
    text-align: center;

    .task-one {
      font-weight: 600;
      font-size: 36rpx;
      color: #2A2929;
      margin-bottom: 27rpx;
      margin-left: 28rpx;
    }

    .task-two {
      font-weight: 400;
      font-size: 24rpx;
      color: #2A2929;
      margin-left: 28rpx;
    }
  }
}

.profile-extra {
  position: absolute;
  top: 750rpx;
  left: 16px;
  width: 690rpx;
  height: 360rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding-top: 35rpx;

  .item {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #2A2929;
  }
}